<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :leftText="title" :autoBack="true">
			</u-navbar>
		</view>

		<view class="con-body" style="padding-left: 20rpx; padding-right: 20rpx; background-color: #FEFEFE;">
			<view style="width: 92%; float: left; height: 65rpx; background-color: #f9f9f9;">
				<u-subsection :list="tabList" :current="current" activeColor="#f56c6c" @change="TabChange"
					bgColor="#f9f9f9"></u-subsection>
			</view>
			<view
				style="width: 8%; background-color: #f9f9f9; text-align: center; float: left; height: 53rpx; padding-top: 12rpx;"
				v-if="listMode == 'list'">
				<u-icon name="grid" size="20" color="#f56c6c" @click="listMode = 'grid'"></u-icon>
			</view>
			<view
				style="width: 8%; background-color: #f9f9f9; text-align: center; float: left; height: 53rpx; padding-top: 12rpx;"
				v-if="listMode == 'grid'">
				<u-icon name="list" size="20" color="#f56c6c" @click="listMode = 'list'"></u-icon>
			</view>


			<view class="uni-flex-center" style="clear: both;" v-if="listMode == 'list'">
				<view class="main-service uni-cell-90" v-for="(item, index) in goodsList">
					<view class="user-list">
						<view class="user-list-cell">
							<u-cell-group :border="false">
								<view class="card-head">
									<u-cell :border="false" @click="goodDetail(item.id, item.sid)">
										<view slot="icon" style="margin-bottom: 0rpx;">
											<u-image :src="item.icon" width="200rpx" height="200rpx" mode="widthFix">
											</u-image>
										</view>
										<view slot="label" style="margin-left: 10rpx;">
											<view>
												<text style="font-size: 32rpx;">{{item.name}}</text>
											</view>
											<view style="margin-top: 8rpx;">
												<view class="u-line-1"
													style="display: inline-flex; text-overflow: ellipsis;">
													<text
														style="color:#E35719; display: flex; margin-left: 15rpx; font-size: 22rpx;">{{item.marks}}</text>
												</view>
											</view>
											<view style="margin-top: 12rpx;">
												<view style="display: inline-flex; text-overflow: ellipsis;">
													<text class="u-line-1"
														style="color:#999999; display: flex; margin-left: 15rpx; font-size: 24rpx;">{{item.remark}}</text>
												</view>
											</view>
											<text
												style=" color: #E35719; font-size: 22rpx; margin-left: 5rpx;  padding: 0 5rpx;border: 1rpx solid #E35719; border-radius: 6rpx;">售{{item.sales}}</text>
											<text
												style=" color: forestgreen; font-size: 22rpx; margin-left: 5rpx; padding: 0 5rpx; border: 1rpx solid forestgreen; border-radius: 6rpx;">评{{item.good}}</text>
											<text
												style=" color: #999; font-size: 22rpx; margin-left: 5rpx; padding: 0 5rpx; border: 1rpx solid #999; border-radius: 6rpx;">存{{item.stock}}</text>


											<view style="margin: 10rpx 0rpx;">

												<u-line dashed color="#999999"></u-line>
											</view>
											<view>
												<view style=" width: 100%;">
													<text
														style="float: left; color: red; font-size: 38rpx; font-weight: 800;">￥{{item.price}}</text>
													<text
														style="float: left; color: #9e9e9e; font-size: 24rpx; text-decoration: line-through; margin-left: 10rpx;">￥{{item.oriPrice}}</text>

												</view>
											</view>
										</view>
									</u-cell>
								</view>
							</u-cell-group>
						</view>
					</view>
				</view>
			</view>

			<view class="uni-flex-center" style="clear: both;" v-if="listMode == 'grid'">
				<u-grid :border="false" col="2">
					<u-grid-item v-for="(item,index) in goodsList" :key="index"
						:customStyle="{width: '46%', marginLeft: '2%', marginRight:'2%',}">
						<view class="main-service" style="min-width: 100%; overflow: hidden;padding: 10rpx 8rpx;"
							@click="goodDetail(item.id, item.sid)">
							<u-image :src="item.icon" :lazy-load="true" width="98%" height="300rpx"
								:customStyle="{marginTop: '10rpx', marginLeft:'2%', borderRadius:'20rpx'}"
								mode="scaleToFill"></u-image>
							<view>
								<view style="margin-top: 10rpx; padding: 0rpx 10rpx;">
									<text style="font-size: 30rpx;">{{item.name}}</text>
								</view>
								<view style="margin-top: 2rpx;">
									<view style="display: inline-flex; text-overflow: ellipsis;">
										<text class="u-line-1"
											style="color:#E35719; display: flex; margin-left: 15rpx; font-size: 20rpx;">{{item.marks}}</text>
									</view>
								</view>
								<view style="margin-top: 3rpx;">
									<view style="display: inline-flex; text-overflow: ellipsis;">
										<text class="u-line-1"
											style="color:#999999; display: flex; margin-left: 15rpx; font-size: 22rpx;">{{item.remark}}</text>
									</view>
								</view>
								<text
									style=" color: #E35719; font-size: 20rpx; margin-left: 5rpx;  padding: 0 5rpx;border: 1rpx solid #E35719; border-radius: 6rpx;">售{{item.sales}}</text>
								<text
									style=" color: forestgreen; font-size: 20rpx; margin-left: 5rpx; padding: 0 5rpx; border: 1rpx solid forestgreen; border-radius: 6rpx;">评{{item.good}}</text>
								<text
									style=" color: #999; font-size: 20rpx; margin-left: 5rpx; padding: 0 5rpx; border: 1rpx solid #999; border-radius: 6rpx;">存{{item.stock}}</text>
								<view style="margin: 10rpx 0rpx;">
									<u-line dashed color="#999999"></u-line>
								</view>
								<view>
									<view style=" width: 100%;">
										<text
											style="float: left; color: red; font-size: 36rpx; font-weight: 800;">￥{{item.price}}</text>
										<text
											style="float: left; color: #9e9e9e; font-size: 22rpx; text-decoration: line-through; margin-left: 10rpx;">￥{{item.oriPrice}}</text>
									</view>
								</view>
							</view>
						</view>

					</u-grid-item>
				</u-grid>
			</view>
			<u-loadmore :status="status" />
			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getShopGoodsList
	} from "@/service/shopservice.js";
	export default {
		data() {
			return {
				search: '搜索您想要的物品',
				title: '邻里商城',
				status: 'loadmore',
				showEmpty: false,
				nid: 0,
				current_id: 0,
				tabList: [
					'综合排序', '销量优先', '好评优先', '最新产品'
				],
				current: 0,
				showNav: false,
				navList: [],
				goodsList: [],
				limit: 10,
				page: 1,
				listMode: 'list'
			}
		},
		onLoad(options) {
			this.title = options.nickname;
			this.sid = options.sid;
			this.current_id = options.cid;
			this.icon = options.icon;
			getShopGoodsList({
				sid: this.sid,
				nid: this.current_id,
			}).then(this.getGoodsList);
		},
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.page = ++this.page;
			getShopGoodsList({
				sid: this.sid,
				nid: this.current_id,
				sort: this.current,
				page: this.page,
				limit: this.limit
			}).then(this.getGoodsList);
		},
		methods: {
			TabChange(index) {
				this.current = index;
				this.status = 'loadmore';
				this.page = 1;
				this.goodsList = [];
				getShopGoodsList({
					sid: this.sid,
					nid: this.current_id,
					sort: this.current,
					page: this.page,
					limit: this.limit
				}).then(this.getGoodsList);
			},
			navTogger(id, name) {
				this.current_id = id;
				this.search = name;
				this.title = name;
				this.status = 'loadmore';
				this.page = 1;
				this.current = 0;
				this.goodsList = [];
				getShopGoodsList({
					sid: this.sid,
					nid: this.current_id,
					sort: this.current,
					page: this.page,
					limit: this.limit
				}).then(this.getGoodsList);
			},
			getGoodsList(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					let list = e.result;
					list.forEach(item => {
						this.goodsList.push(item)
					})
					if (list.length < this.limit) this.status = 'nomore';
				} else {
					this.status = 'nomore';
					if (this.goodsList.length == 0) {
						this.showEmpty = true;
					}
				}
			},
			goodDetail(id, sid) {
				this.$u.route({
					url: '/pagesShop/nav/good-detail',
					params: {
						gid: id,
						sid: sid
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: #EEEEEE;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: #666666;
		margin-left: 10rpx;
	}

	.tab-c {
		width: 96%;
		margin-left: 2%;
		height: 80rpx;
		display: inline-flex;
	}

	.tab-i {
		min-width: 100rpx;
		margin: 0rpx 40rpx;
		line-height: 80rpx;
		color: #666666;
		display: flex;
	}

	.scroll-list {
		margin-left: 20rpx;
		@include flex(column);

	}
</style>
